<template>
  <div class="container">
    <!-- 课程详情 -->
    <div v-show="!showUpdate">
      <div style="text-align:center;">
        <h3>课表详情</h3>
      </div>
      <hr />
      <table>
        <tr class="_tr">
          <td align="left" style="widtd:200px">
            <span>课程编号：</span>
          </td>
          <td align="left" style>
            <span>{{courseDetails.course_id}}</span>
          </td>
        </tr>
        <tr class="_tr">
          <td align="left" style="widtd:200px">
            <span>课程名称：</span>
          </td>
          <td align="left" style>
            <span>{{courseDetails.course_name}}</span>
          </td>
        </tr>
        <tr class="_tr">
          <td align="left" style="widtd:200px">
            <span>课程校区：</span>
          </td>
          <td align="left" style>
            <span>{{courseDetails.course_name}}</span>
          </td>
        </tr>
        <tr class="_tr">
          <td align="left">
            <span>学期：</span>
          </td>
          <td align="left">
            <span>{{courseDetails.institute_name}}</span>
          </td>
        </tr>
        <tr class="_tr">
          <td align="left">
            <span>授课班级：</span>
          </td>
          <td align="left">
            <span>{{courseDetails.class_name}}</span>
          </td>
        </tr>
        <tr class="_tr">
          <td align="left">
            <span>课程人数：</span>
          </td>
          <td align="left">
            <span>{{courseDetails.arrangeNumber}}</span>
          </td>
        </tr>
        <tr class="_tr">
          <td align="left">
            <span>授课教师：</span>
          </td>
          <td align="left">
            <span>{{courseDetails.teacher_name}}</span>
          </td>
        </tr>
        <tr class="_tr">
          <td align="left">
            <span>上课地点：</span>
          </td>
          <td align="left">
            <span>{{courseDetails.place}}</span>
          </td>
        </tr>
        <tr class="_tr">
          <td align="left">
            <span>日期：</span>
          </td>
          <td align="left">
            <span>{{courseDetails.attendanceNumber}}</span>
          </td>
        </tr>
        <tr class="_tr">
          <td align="left">
            <span>星期：</span>
          </td>
          <td align="left">
            <span>{{courseDetails.week}}</span>
          </td>
        </tr>
        <tr class="_tr">
          <td align="left">
            <span>节次：</span>
          </td>
          <td align="left">
            <span>{{courseDetails.sectionTime}}</span>
          </td>
        </tr>
        <tr class="_tr">
          <td align="left">
            <span>课时：</span>
          </td>
          <td align="left">
            <span>{{courseDetails.classPeriod}}</span>
          </td>
        </tr>
        <tr>
          <td style="text-align:center;height:100px;" colspan="2" rowspan="2">
            <el-button type="primary" @click="update" v-if="showButton">修改课程信息</el-button>
            <el-button type="danger" @click="deleteCourse" v-if="showButton">删除</el-button>
            <el-button type="primary" @click="back">返回</el-button>
          </td>
        </tr>
      </table>
      <el-switch
        v-model="showButton"
        active-text="admin"
        inactive-text="editor">
      </el-switch>
    </div>
    <!-- 课程修改组件 -->
    <div v-show="showUpdate">
      <update :courseDetails="courseDetails" @showUpdate="showUpdate1" />
    </div>
  </div>
</template>

<script>
import update from "@/views/education-instructionalMatters/curriculum/update";
export default {
  name: "course_details",
  props: {
    courseDetails: Object //父组件传过来的课程表详情
  },
  data() {
    return {
      showUpdate: false, //显示修改课程组件
      showButton: true //显示按钮否
    };
  },
  components: {
    update
  },
  methods: {
    //返回全部课程
    back() {
      this.$emit("showDetails", false);
    },
    //删除该课程
    deleteCourse() {
      this.$alert("删除课程", "删除成功", {
        confirmButtonText: "确定",
        callback: action => {
          //删除成功，返回页面
          this.$emit("showDetails", false);
        }
      });
    },
    //显示修改组件
    update() {
      this.showUpdate = true;
    },
    //修改组件传回来的布尔值
    showUpdate1(val) {
      this.showUpdate = val;
    }
  }
};
</script>

<style scoped>
h3 {
  font-weight: 500;
}
span {
  font-weight: 400;
}
.container {
  width: 80%;
  max-width: 100%;
  margin: 20px auto;
}
table {
  width: 800px;
  border: 0;
  margin: 50px auto 0;
  text-align: center;
  border-collapse: collapse;
  border-spacing: 0;
}
table td {
  background: #fafbfc;
  font-weight: bolder;
  line-height: 40px;

  border: 1px solid #eee;
}
._tr:hover td {
  background-color: skyblue;
}
</style>
